﻿// Panel is a widget that has a (optional) header, a body and a footer
define([
    'Xjs/core/util',
    'Xjs/ui/Control',
// Include the modules that register the types of the components of the panel
//'Xjs/ui/panel/PanelHeader',
    'Xjs/ui/tool/Toolbar',
    'Xjs/ui/tool/Collapser'
],
function (util, Control) {
    'use strict';

    var type = 'panel',
    Panel = Xjs.getType(type);

    if (Panel) { // It has been already loaded
        return Panel;
    }

    Panel = util.define({
        base: Control,
        construct: function (conf, parent) {

            var collapser;

            Panel.base.constructor.call(this, conf, parent); // Call the base constructor

            this.addClass('w-container');

            this.createToolbar(conf);

            if (conf.header) {
                this.createHeader(conf.header);
            }

            if (conf.collapser) {
                collapser = Xjs.create('collapser', conf.collapser, this);
                this.toolbar.addTool(collapser);
            }

            if (conf.tools) {
                var toolbar = this.toolbar;

                conf.tools.forEach(function (t) {
                    var tool = Xjs.create(t.type, t, toolbar);
                    toolbar.addTool(tool);
                });
            }

            if (conf.body) {
                this.createBody(conf.body);

                if (collapser) {
                    collapser.addTarget(this.body);
                }
            }

            if (conf.footer) {
                this.createFooter(conf.footer);

                if (collapser) {
                    collapser.addTarget(this.footer);
                }
            }
        },
        type: type,
        border: true,

        createToolbar: function (conf) {

            if (conf.collapser || conf.tools) { // Requires toolbar
                this.toolbar = Xjs.create('toolbar', {}, this);
                this.addChild(this.toolbar);
            }
        },

        createHeader: function (conf) {
            conf = conf || {};

            if (util.isString(conf)) {
                this.header = Xjs.create('control', {
                    content: conf,
                    attributes: {
                        cls: 'w-header'
                    }
                }, this);
            }
            else {
                this.header = Xjs.create(conf.type || 'control', conf, this);
                this.header.addClass('w-header');
            }
        },

        createBody: function (conf) {
            conf = conf || {};

            if (util.isString(conf)) {
                this.body = Xjs.create('control', {
                    content: conf,
                    attributes: {
                        cls: 'w-body'
                    }
                }, this);
            }
            else {
                this.body = Xjs.create(conf.type || 'container', conf, this);
                this.body.addClass('w-body');
            }
        },

        createFooter: function (conf) {
            conf = conf || {};

            if (util.isString(conf)) {
                this.footer = Xjs.create('control', {
                    content: conf,
                    attributes: {
                        cls: 'w-footer'
                    }
                }, this);
            }
            else {
                this.footer = Xjs.create(conf.type || 'container', conf, this);
                this.footer.addClass('w-footer');
            }
        },

        // Overriden to guarantee the order of the elements in the generated HTML
        onBeforeBuild: function () {

            if (this.header) {
                this.builder.addNode(this.header.build());
            }

            if (this.body) {
                this.builder.addNode(this.body.build());
            }

            if (this.footer) {
                this.builder.addNode(this.footer.build());
            }
        },

        // Since we cannot include them in the children to guarantee that the HTML is generated in specific order we need to manually fire the onRender
        onRender: function () {

            Panel.base.onRender.call(this);

            if (this.header) {
                this.header.onRender();
            }

            if (this.body) {
                this.body.onRender();
            }

            if (this.footer) {
                this.footer.onRender();
            }
        },

        // Populates all the content control and the children controls with declared binders from the data
        valueFrom: function (data) {

            Panel.base.valueFrom.call(this);

            if (this.header) {
                this.header.valueFrom(data);
            }

            if (this.body) {
                this.body.valueFrom(data);
            }

            if (this.footer) {
                this.footer.valueFrom(data);
            }
        },

        // Populates the data from all the content control and the children controls with declared binders
        valueTo: function (data) {

            Panel.base.valueTo.call(this);

            if (this.header) {
                this.header.valueTo(data);
            }

            if (this.body) {
                this.body.valueTo(data);
            }

            if (this.footer) {
                this.footer.valueTo(data);
            }
        }

    });

    Xjs.registerType(Panel);

    return Panel;
});